<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" >

      <template slot="blank_1541386665000_30513" slot-scope="scope">
        <!-- 贴现金额 -->
        <!-- 通过 v-model="scope.model.blank_1541386665000_30513" 绑定数据 -->
        <el-col :span="6"><el-input v-model="input1" placeholder=""/></el-col>
        <el-col :span="3" style="text-align:center;">到</el-col>
        <el-col :span="6"><el-input v-model="input2" placeholder=""/></el-col>
      </template>

    </generate-form>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-table ref="generateTable" :data="jsonDataTable" :remote="remoteFuncs" :value="editData">
      <!--自定义新增编辑页面内容-->
      <!--<template slot="table_dialog" slot-scope="scope">-->
      <!--<generate-form :ref="scope.form" :data="jsonData" :remote="remoteFuncs" :value="scope.data"/>-->
      <!--</template>-->
    </generate-table>
    <div style="padding-top:10px;">
      <generate-form ref="generateForm" :data="jsonData2" :remote="remoteFuncs" :value="editData" />
    </div>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">贴现到账</el-button>
      <el-button type="primary">打印</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'CreateFromSetname',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      input1: '',
      input2: '',
      jsonData:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴现借据号',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541386579000_21327'
                      },
                      'key': '1541386579000_21327',
                      'model': 'input_1541386579000_21327',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'blank',
                      'name': '贴现金额',
                      'icon': 'chalkboard',
                      'options': {
                        'defaultType': 'String',
                        'remoteFunc': 'func_1541386665000_30513'
                      },
                      'key': '1541386665000_30513',
                      'model': 'blank_1541386665000_30513',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541386574000_31543'
              },
              'key': '1541386574000_31543',
              'model': 'grid_1541386574000_31543',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现业务类型',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountBusinessType'
                      },
                      'key': '1541386684000_64056',
                      'model': 'select_1541386684000_64056',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现状态',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountType'
                      },
                      'key': '1541386772000_97042',
                      'model': 'select_1541386772000_97042',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541386669000_49667'
              },
              'key': '1541386669000_49667',
              'model': 'grid_1541386669000_49667',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '票据是否锁定',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'BillingLocking'
                      },
                      'key': '1541386816000_24088',
                      'model': 'select_1541386816000_24088',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': []
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541386806000_6140'
              },
              'key': '1541386806000_6140',
              'model': 'grid_1541386806000_6140',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      jsonDataTable:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴现借据号',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'number',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541387034000_26424'
                      },
                      'key': '1541387034000_26424',
                      'model': 'input_1541387034000_26424',
                      'rules': [
                        {
                          'type': 'number',
                          'message': '贴现借据号格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '实（付）收金额',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'number',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541387063000_39447'
                      },
                      'key': '1541387063000_39447',
                      'model': 'input_1541387063000_39447',
                      'rules': [
                        {
                          'type': 'number',
                          'message': '实（付）收金额格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541387023000_33578'
              },
              'key': '1541387023000_33578',
              'model': 'grid_1541387023000_33578',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '贴现起息日',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'date',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541387078000_66680'
                      },
                      'key': '1541387078000_66680',
                      'model': 'date_1541387078000_66680',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '赎回日期',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'date',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541387092000_97673'
                      },
                      'key': '1541387092000_97673',
                      'model': 'date_1541387092000_97673',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541387071000_55700'
              },
              'key': '1541387071000_55700',
              'model': 'grid_1541387071000_55700',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现种类',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountKind'
                      },
                      'key': '1541387107000_96737',
                      'model': 'select_1541387107000_96737',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴现利率',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541387148000_98714'
                      },
                      'key': '1541387148000_98714',
                      'model': 'input_1541387148000_98714',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541387095000_12199'
              },
              'key': '1541387095000_12199',
              'model': 'grid_1541387095000_12199',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '贴入单位',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541387169000_51813'
                      },
                      'key': '1541387169000_51813',
                      'model': 'input_1541387169000_51813',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '实付(收)贴现利息',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': false,
                        'clearable': false,
                        'remoteFunc': 'func_1541387185000_63710'
                      },
                      'key': '1541387185000_63710',
                      'model': 'input_1541387185000_63710',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '实付(收)贴现利息格式不正确'
                        }
                      ]
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541387153000_75353'
              },
              'key': '1541387153000_75353',
              'model': 'grid_1541387153000_75353',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '付息方式',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'InterestPayment'
                      },
                      'key': '1541387213000_60932',
                      'model': 'select_1541387213000_60932',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'select',
                      'name': '贴现状态',
                      'icon': 'regular/caret-square-down',
                      'options': {
                        'defaultValue': '',
                        'multiple': false,
                        'disabled': false,
                        'clearable': false,
                        'placeholder': '',
                        'required': false,
                        'showLabel': false,
                        'width': '100%',
                        'options': [
                          {
                            'value': '下拉框1'
                          },
                          {
                            'value': '下拉框2'
                          },
                          {
                            'value': '下拉框3'
                          }
                        ],
                        'remote': true,
                        'remoteOptions': [],
                        'props': {
                          'value': 'value',
                          'label': 'label'
                        },
                        'remoteFunc': 'DiscountType'
                      },
                      'key': '1541387256000_93270',
                      'model': 'select_1541387256000_93270',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541387202000_78700'
              },
              'key': '1541387202000_78700',
              'model': 'grid_1541387202000_78700',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      jsonData2:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'date',
                      'name': '申请日期',
                      'icon': 'regular/calendar-alt',
                      'options': {
                        'defaultValue': '',
                        'readonly': false,
                        'disabled': false,
                        'editable': true,
                        'clearable': true,
                        'placeholder': '',
                        'startPlaceholder': '',
                        'endPlaceholder': '',
                        'type': 'date',
                        'format': 'yyyy-MM-dd',
                        'timestamp': false,
                        'required': false,
                        'width': '100%',
                        'remoteFunc': 'func_1541408147000_61877'
                      },
                      'key': '1541408147000_61877',
                      'model': 'date_1541408147000_61877',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': []
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541408137000_89144'
              },
              'key': '1541408137000_89144',
              'model': 'grid_1541408137000_89144',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      editData: {},
      values: {},
      remoteFuncs: {

        DiscountBusinessType(resolve) {
          // 贴现业务类型 select_1541386684000_64056
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('贴现业务类型').then(response => { resolve(response.data) })
        },

        DiscountType(resolve) {
          // 贴现状态 select_1541386772000_97042
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('贴现状态2').then(response => { resolve(response.data) })
        },

        BillingLocking(resolve) {
          // 票据是否锁定 select_1541386816000_24088
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('票据是否锁定').then(response => { resolve(response.data) })
        },

        DiscountKind(resolve) {
          // 贴现种类 select_1541387107000_96737
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('贴现种类').then(response => { resolve(response.data) })
        },

        InterestPayment(resolve) {
          // 付息方式 select_1541387213000_60932
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('付息方式').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
